<ion-header>
  <!-- 没有分隔线 -->
  <ion-toolbar style="--background:#fff" class="bottom-line-none" [ngStyle]="this.navParams.data.value.titleCssStyle | styleFilter">

    <ion-buttons style="margin-left: 11px;" slot="start" appDebounceClick (debounceClick)="dismissClick()">
      <!-- 配置返回icon -->
      <ng-container *ngIf="this.navParams.data.value.backIcon; else noIcon">
        <img class="header-icon-img" src="../assets/img/{{this.navParams.data.value.backIcon}}">
      </ng-container>

      <ng-template #noIcon>
        <img class="header-icon-img" src="../assets/img/close.png">

      </ng-template>


    </ion-buttons>
    <ion-title [ngStyle]="data.valueNCssStyle | styleFilter"> {{data.label}} </ion-title>

  </ion-toolbar>
</ion-header>
<ion-content>
  
  <div class="multiple-select-bg-3" [ngStyle]="data.modalCssStyle | styleFilter">
    <div class="multiple-select-left">
      <div class="item-left" [ngClass]="{'item-left-open': it.open}" *ngFor="let it of data.children; "
        appDebounceClick (debounceClick)="itemLeftClick(it,data)">
        <span class="yellow-current" *ngIf="it.open"></span>
        <span class="red-dot" *ngIf="it.hasValue"></span>
        {{it.label}}
      </div>
    </div>
    <div class="multiple-select-right"
      [ngClass]="{'multiple-select-right-first': data.current !== data.children[0]}">
      <ng-container
        *ngIf="data.current?.children?.length > 0 && (!data.current?.children[0].children || data.current?.children[0].children?.length === 0); else hasChildren">

        <div class="row-bg" style="padding-left: 1.25rem;padding-top: 0;margin-bottom: 0.5rem;">
          <div class="row" style="margin-bottom: 1.75rem;" *ngIf="showCheckAll">
            <i [ngClass]="{'nochecked-row': !data.current.checked,'checked-row': data.current.checked}"
              appDebounceClick (debounceClick)="chooseCurrentAll(data)"></i>
            <span style="flex-grow: 1;">全选</span>
          </div>
          <div class="tag-bg">
            <div class="tag" [ngClass]="{'tag-checked': tag.checked}" appDebounceClick (debounceClick)="tagClick(tag,tag,data)"
              *ngFor="let tag of data.current.children">{{tag.label}}</div>
          </div>

        </div>
      </ng-container>
      <ng-template #hasChildren>

        <div class="row-bg" style="padding-left: 1.25rem;padding-top: 0;margin-bottom: 0.5rem;">
          <div class="row" style="margin-bottom: 1.75rem;" *ngIf="showCheckAll">
            <i [ngClass]="{'nochecked-row': !data.current.checked,'checked-row': data.current.checked}"
              appDebounceClick (debounceClick)="chooseCurrentAll(data)"></i>
            <span style="flex-grow: 1;">全选</span>
          </div>

          <ng-container *ngFor="let it of data.current?.children">
            <div class="row">
              <i [ngClass]="{'nochecked-row': !it.checked,'checked-row': it.checked}"
                appDebounceClick (debounceClick)="chooseAll(it,data)"></i>
              <span style="flex-grow: 1;">{{it.label}}</span>
            </div>
            <div class="tag-bg" id=it.value *ngIf="it.children && it.children.length >0">
              <div class="tag" [ngClass]="{'tag-checked': tag.checked}" appDebounceClick (debounceClick)="tagClick(tag,it,data)"
                *ngFor="let tag of it.children">{{tag.label}}</div>
            </div>
          </ng-container>



        </div>
      </ng-template>


    </div>
    <div class="transfer"></div>
  </div>
</ion-content>
<ion-footer>
  <div class="footer">
    <p class="del-bg" appDebounceClick (debounceClick)="resetClick()">
      <img class="del-img" src="../assets/img/nav_icon_delete_lj@3x.png" alt="">
      <span class="del-text">重置</span>
    </p>
    <p class="sure-btn" appDebounceClick (debounceClick)="sureClick()">确定</p>
  </div>
</ion-footer>